<div ng-if="vm.ShowControls" ng-include="'app/layout/FABGoBack.html'"></div>
<section id="attachment-view" class="mainbar layout layout-wrap referralviewblock" layout="column" layout-align="sapce-around">
    <br />
    <div class="layout layout-wrap" layout="row" layout-align="center center" flex="90">
        <md-card class="layout layout-fill md-whiteframe-9dp DemoCard" flex="90">
            <md-card-content>
                <md-toolbar class="layout-wrap flex">
                    <h3 class="Padding10">Process Referral</h3>
                </md-toolbar>
                <form name="ProcessReferralForm">
                    <div ng-show="$root.IsController">
                        <label style="float:right">Created By: {{vm.CreatedBy}} at {{vm.CreatedAt}}</label>
                        <h4 ng-disabled="$root.IsController">Refer this patient to:</h4>

                        <md-input-container class="md-block" ng-disabled="$root.IsController">
                            <label>Practice</label>
                            <md-select name="cmbPractice" ng-model="vm.RefPractice" required ng-disabled="vm.ReadOnly">
                                <md-option ng-repeat="Prac in vm.PracticesList" value="{{Prac.PracticeID}}">
                                    {{Prac.PracticeName}}
                                </md-option>
                            </md-select>
                            <div ng-messages="ProcessReferralForm.RefPractice.$error" role="alert">
                                <div ng-message-exp="['required']">
                                    Select a practice
                                </div>
                            </div>
                        </md-input-container>

                        <div class="layout layout-wrap" layout="column" flex>
                            <div class="layout layout-wrap" layout="row" flex>
                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Preferred Physician</label>
                                    <input ng-model="vm.PreferredPhysician" type="text" name="PreferredPhysician" ng-readonly="true" />
                                </md-input-container>
                            </div>
                            <div class="layout layout-wrap" layout="row" flex>
                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Is Physician PPG affiliated?</label>
                                    <input ng-model="vm.PPGPhysician" type="text" name="PPGPhysician" ng-readonly="true" />
                                </md-input-container>

                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Is patient established with physician?</label>
                                    <input ng-model="vm.EstablishedPatient" type="text" name="EstablishedPatient" ng-readonly="true" />
                                </md-input-container>

                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Preferred Physician Phone /Fax</label>
                                    <input ng-model="vm.PrefPhone" type="text" name="PrefPhone" ng-readonly="true" />
                                </md-input-container>

                            </div>
                        </div>
                            <md-input-container class="md-block" ng-disabled="$root.IsController">
                                <label>Physician</label>
                                <md-select name="cmbPhysician" ng-model="vm.RefPhysician" required ng-disabled="vm.ReadOnly">
                                    <md-option ng-repeat="Phy in vm.Physicians | filter : vm.FilterPractice" value="{{Phy.PhysicianID}}">
                                        {{Phy.PhysicianName}}
                                    </md-option>
                                </md-select>
                                <div ng-messages="ProcessReferralForm.RefPhysician.$error" role="alert">
                                    <div ng-message-exp="['required']">
                                        Select a physician
                                    </div>
                                </div>
                            </md-input-container>
                            <md-divider></md-divider>
                        </div>
                    <h4>Referral Status</h4>

                    <div class="layout layout-wrap" layout="column" layout-align="space-around">

                        <div class="layout layout-wrap" layout="row" layout-align="space-between center">
                            <md-radio-group ng-model="vm.ReferralAccepted">
                                <label> Accept Referral </label>
                                <md-radio-button value="true"  ng-disabled="vm.ReadOnly">Yes</md-radio-button>
                                <md-radio-button value="false" class="md-warn" ng-disabled="vm.ReadOnly"> No </md-radio-button>
                            </md-radio-group>
                            <!--<md-switch ng-model="vm.ReferralAccepted" aria-label="Accept Referral" ng-disabled="vm.ReadOnly">
                                Accept Referral for {{vm.RefPhysician}}
                            </md-switch>-->

                            <span>Last Modified by: {{vm.ReferralModifiedBy}} at {{vm.ReferralModifiedTime}}</span>
                        </div>
                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>Notes for accepting referral</label>
                            <textarea ng-model="vm.ReferralNotes" type="text" name="ReferralNotes" rows="5" ng-readonly="vm.ReadOnly"></textarea>
                        </md-input-container>


                        <div class="layout layout-wrap" layout="row" layout-align="space-between center">
                            <md-switch ng-model="vm.PatientContact" aria-label="Reached out to patient for scheduling" ng-disabled="vm.ReadOnly">
                                Reached out to patient for scheduling
                            </md-switch>

                            <span>Last Modified by: {{vm.PatientContactModifiedBy}} at {{vm.PatientContactModifiedTime}}</span>
                        </div>

                            <md-datepicker class="md-icon-float md-block md-accent" ng-model="vm.ApptDate" md-placeholder="Appointment Date" name="ApptDate" ng-disabled="vm.ReadOnly"></md-datepicker>
                            <md-input-container class="md-icon-float md-block md-accent">
                                <label>Appointment Time</label>
                                <input ng-model="vm.ApptTime" type="text" name="ApptTime"  ng-readonly="vm.ReadOnly"/>
                            </md-input-container>

                            <md-input-container class="md-icon-float md-block md-accent">
                                <label>Notes for patient contact</label>
                                <textarea ng-model="vm.PatientContactNotes" type="text" name="PatientContactNotes" rows="5" ng-readonly="vm.ReadOnly"></textarea>
                            </md-input-container>


                            <div class="layout layout-wrap" layout="row" layout-align="space-between center">
                                <md-switch ng-model="vm.PatientVisit" aria-label="Patient Visit" ng-disabled="vm.ReadOnly">
                                    Patient visit completed
                                </md-switch>

                                <span>Last Modified by: {{vm.PatientVisitModifiedBy}} at {{vm.PatientVisitModifiedTime}}</span>
                            </div>
                        </div>
                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>Notes for patient visit</label>
                            <textarea ng-model="vm.PatientVisitNotes" type="text" name="PatientVisitNotes" rows="5" ng-readonly="vm.ReadOnly"></textarea>
                        </md-input-container>

                    <div class="layout layout-wrap" layout="row" layout-align="space-between center">
                        <md-switch ng-model="vm.NoteStatus" aria-label="Note Completed and Sent" ng-disabled="vm.ReadOnly">
                            Note Completed and Sent
                        </md-switch>

                        <span>Last Modified by: {{vm.NoteUpdatedBy}} at {{vm.NoteUpdatedTime}}</span>
                    </div>

                    <md-datepicker class="md-icon-float md-block md-accent" ng-model="vm.NoteSentDate" md-placeholder="Note Sent Date" name="NoteSentDate" ng-disabled="vm.ReadOnly"></md-datepicker>

                        <md-card-footer ng-if="!vm.DisableProcess">
                            <div class="md-actions" layout="row" layout-align="space-around center">
                                <md-button class="md-raised md-primary md-accent" ng-click="vm.EditClick()" ng-show="vm.ShowControls" ng-disabled="!vm.ReadOnly">EDIT</md-button>
                                <md-button class="md-raised md-primary md-accent" ng-click="vm.SaveData()" ng-disabled="vm.ReadOnly">SAVE</md-button> <!--(vm.ReadOnly || ProcessReferralForm.$invalid) || vm.ShowControls-->
                            </div>
                        </md-card-footer>
                </form>
            </md-card-content>
        </md-card>
    </div>
</section>